<template>
  <div class="rank-container">
    <div class="title">
      <p>热门景区排行</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import * as echarts from 'echarts'

  const charts = ref<HTMLDivElement | null>(null)
  onMounted(() => {
    let myCharts = echarts.init(charts.value)
    myCharts.setOption({
      title: {
        // 主标题
        text: '景区排行',
        left: '50%',
        // 主标题链接
        link: 'http://www.baidu.com',
        textStyle: {
          color: '#fff',
          fontSize: '20px',
        },
        subtext: '各大景区排行',
        // 副标题拦截
        sublink: '',
        subtextStyle: {
          color: '#fff',
          fontSize: '15px',
        },
      },
      xAxis: {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: '#fff',
            opacity: 0.5,
          },
        },
      },
      yAxis: {
        // type: 'category'
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff',
            opacity: 0.5,
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: true,
        },
      },
      series: [
        {
          type: 'bar',
          name: '景区排行',
          data: [10, 20, 30, 40, 50, 60, 70],
          // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
          label: {
            show: true,
            position: 'top',
            color: '#fff',
          },
          backgroundStyle: {
            color: 'rgba(92, 9, 9, 1)',
          },
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
            color: function (data: any) {
              let arr = ['red', 'yellow', 'cyan', 'skyblue', 'blue', 'yellowgreen', 'orange']
              return arr[data.dataIndex]
            },
          },
        },
        {
          type: 'line',
          name: '各大景区排行',
          data: [20, 130, 40, 160, 90, 100, 12],
          smooth: true,
          color: 'skyblue',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'blue', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'skyblue', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
      grid: {
        left: 30,
        right: 20,
        top: 60,
        bottom: 20,
      },
      // 提示框组件
      tooltip: {
        show: true,
      },
    })
  })
</script>

<style lang="scss" scoped>
  .rank-container {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-cb.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 20px;
    .title {
      // margin-left: -5px;
      p {
        color: #fff;
        font-size: 20px;
      }
    }

    .charts {
      height: calc(100% - 30px);
    }
  }
</style>
